<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程管理</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../ep/static/js/vue.js"></script>
    <!--  引入element组件库 -->
    <script src="../ep/static/js/element.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="../ep/static/elementui/theme-chalk/index.css">
    <script src="../ep/static/js/axios.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">课程管理</div>
        </el-col>
    </el-row><br>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple">
                <el-row>

                    <el-button type="primary" @click="dialogFormVisible = true">新建课程</el-button>

                </el-row>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row><br>
    <el-row>
        <!-- 名字搜索框  -->
        <el-col :span="10">
            <div class="grid-content bg-purple">
                <el-input v-model="input" placeholder="请输入要搜索的课程名" style="width: 300px;"></el-input>
            </div>
        </el-col>
        <!-- 课程类别搜索框 -->
        <el-col :span="10">

                <el-select v-model="subject" placeholder="请选择学科">
                    <el-option
                            v-for="item in subjectOptions"
                            :key="item.value2"
                            :label="item.label2"
                            :value="item.value2">
                    </el-option>
                </el-select>

        </el-col>

        <!-- 按钮 -->
        <el-col :span="4">
            <div class="grid-content bg-purple">
                <el-row>
                    <el-button type="primary" round @click="find()">查询</el-button>
                    <el-button type="primary" round @click="black()">重置</el-button>
                </el-row>
            </div>
        </el-col>
    </el-row><br>

    <el-row>
        <!-- 表格 -->
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="课程ID" width="180">
                    </el-table-column>
                    <el-table-column prop="courseName" label="课程名称" width="180">
                    </el-table-column>
                    <el-table-column prop="subjectBean.subjectName" label="学科" width="180">
                    </el-table-column>
                    <el-table-column prop="subjectBean.projectBean.projName" label="项目" width="180">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">

                            <el-button type="text" @click="open(scope.row,scope.$index)">修改</el-button>
                            <el-button type="text" size="small" @click="del(scope.row,scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-size="size"
                               layout="total, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </div>

        </el-col>

    </el-row>
    <el-dialog title="新建课程" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="课程名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="项目" >
                <el-select v-model="project" placeholder="请选择">
                    <el-option
                            v-for="item in projectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学科" >
                <el-select v-model="subject" placeholder="请选择">
                    <el-option
                            v-for="item in subjectOptions"
                            :key="item.value2"
                            :label="item.label2"
                            :value="item.value2">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script type="text/javascript">
    let element= new Vue({
        el: "#app",
        data: {
            value: "",
            total:'',
            input:"",
            size:10,
            project:"",
            subject:"",
            projectOptions:[],
            subjectOptions:[],
            currentPage: 1,
            tableData: [],
            dialogTableVisible: false,
            dialogFormVisible: false,
            ruleForm: {
                name: '',
                region: '',
                region2: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [{
                    required: true,
                    message: '请输入课程名称',
                    trigger: 'blur'
                },
                    {
                        min: 3,
                        max: 10,
                        message: '长度在 3 到 10 个字符',
                        trigger: 'blur'
                    }
                ],
                region: [{
                    required: true,
                    message: '请选择项目',
                    trigger: 'change'
                }],
                region2: [{
                    required: true,
                    message: '请选择科目',
                    trigger: 'change'
                }],

            }

        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(element.$data.ruleForm.name)
                        axios.get('course/more', {
                            params: {
                                courseName:element.$data.ruleForm.name,
                                pid:this.project,
                                sid:this.subject,
                            }
                        })
                            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                                // console.log(res.data.data.data);
                                // this.total = res.data.data.total;
                                // this.tableData = res.data.data.data;
                                alert('添加成功!');
                                location.reload()
                            })
                            .catch(error => {
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            black:function () {
                element.$data.input=""
                this.subject=""
            },
            find:function () {
                console.log(this.subject)

                console.log(element.$data.input)
                axios.get('course/findOneByCondition',{
                    params: {
                        id:this.subject,
                        courseName:element.$data.input
                    }
                })
                    .then(function (res) {
                        element.$data.total=res.data.length
                        element.$data.tableData=res.data;
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            del(row, index) { //删除
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'DELETE',
                        url: 'course/del?id=' + row.id,
                    }).then(res => {
                        alert("删除成功");
                        location.reload();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            open(row, index) {
                this.$prompt('请输入替换的名字', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputErrorMessage: '请输入想要修改的名称'

                }).then(({ value }) => {

                    axios({
                        method: 'GET',
                        url: 'course/change?id=' + row.id + '&courseName='+value,
                    }).then(res => {
                        alert("修改成功");
                        location.reload();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        }

    })
    axios.get('course/findAll')
        .then(function (res) {
            element.$data.total=res.data.length
            element.$data.tableData=res.data;

        })
        .catch(function (error) {
            console.log(error)
        });
    axios.get("project/getProject")
        .then(function (res) {
            let projs = res.data
            for(let i=0; i<projs.length; i++){
                let proj = {
                    value:i+1,
                    label:projs[i]
                }
                element.$data.projectOptions.push(proj)
            }
        });
    axios.get("subject/getsubject")
        .then(function (res) {
            console.log(res.data)
            let projs = res.data
            for(let i=0; i<projs.length; i++){
                let proj = {
                    value2:i+1,
                    label2:projs[i]
                }
                element.$data.subjectOptions.push(proj)
            }
        })
</script>
</html>
